<template>
  <div id="classroom_manage" class="container">
    <div class="content">
      <!-- <div class="title">商品管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input style="width: 3.5rem;" placeholder="搜索 商品名称" v-model="tabledisplayObj.name"
              class="input_search"></el-input>
            <div @click="searchGood()" v-if="hasApi('goodsList')" class="search_btn" style="margin-left:0.1rem;">搜索</div>
            <div class="right_btn" v-if="hasApi('goodAdd')" @click="openAdd">新&nbsp&nbsp增</div>
          </div>
        </div>

        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 4rem;">商品名称</td>
                <td style="width: 4rem;">商品分类</td>
                <td style="width: 4rem;">商品单价</td>
                <td style="width: 4rem;">商品库存</td>
                <td style="width: 4rem;">创建时间</td>
                <td style="width: 4rem;">创建人</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in goodList">
                <td>{{item.name}}</td>
                <td>{{goodsModeMap[item.goodsMode]}}</td>
                <td>￥{{item.salesPrice}}</td>
                <td>{{item.stockNum}}件</td>
                <td>{{item.createTime}}</td>
                <td>{{item.createUserName}}</td>
                <td>
                  <span class="operate_btn"  v-if="hasApi('goodUpdate')" @click="handleStorage(index,item)">入库</span>
                  &nbsp;
                  <span class="operate_btn" v-if="hasApi('goodUpdate')" @click="handleEdit(index,item)">编辑</span>
                  &nbsp;
                  <span class="operate_btn" v-if="hasApi('goodUpdate')" @click="handleDelete(index,item)">删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination class="page" layout="total, sizes, prev, pager, next, jumper" :current-page="tabledisplayObj.currPage"
          @size-change="pageSizeChange" @current-change="tabledisplayChangePage" :total="tabledisplayObj.total"></el-pagination>
      </div>
    </div>
    <createGood ref="createGood" @callback="closeAdd"></createGood>
  </div>
</template>
<script>
  let vm;
  let user;
  import createGood from "./common/createGood";
  export default {
    data() {
      return {
        tabledisplayObj: {
          currPage: 1,
          pageSize: 10,
          total: 0,
          name: "",
          campusId: this.$store.state.campusId
        },
        goodList: [],
        goodsModeMap: []
      };
    },
    components: {
      createGood
    },
    methods: {
      /**
       * 打开新增
       */
      openAdd() {
        this.$refs.createGood.init();
      },
      /**
       * 关闭新增
       */
      closeAdd() {
        this.initData();
      },
      /**改变校区
       * @param {Object} campusId校区ID
       */
      campusChange: function(campusId) {
        this.tabledisplayObj.campusId = campusId;
        this.tabledisplayObj.currPage = 1;
        this.initData();
      },
      /**
       * 初始化数据
       */
      initData() {
        let goodLisTemp = []; //临时存放列表
        api.goodsList(vm.tabledisplayObj).then(function(data) {
          if (data.resultCode == 2000) {
            goodLisTemp = data.list;
            for (let i = 0; i < goodLisTemp.length; i++) {
              goodLisTemp[i].createTime = goodLisTemp[i].createTime.split(
                " "
              )[0];
            }
            vm.tabledisplayObj.total = data.totalCount;
            vm.goodList = goodLisTemp;
          } else {
            vm.$message.error(data.message);
          }
        });
      },
      pageSizeChange: function(val) {
        this.tabledisplayObj.pageSize = val;
        this.initData();
      },
      /**表格显示形式翻页 */
      tabledisplayChangePage(val) {
        this.tabledisplayObj.currPage = val;
        this.initData();
      },
      /** 入库
       * @param {Object} index 下标
       * @param {Object} row 数据
       */
      handleStorage(index, row) {
        this.$prompt(row.name,'商品入库', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder:"请输入入库数量",
          inputPattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
          inputErrorMessage: '请输入正整数'
        }).then(({
          value
        }) => {
          if(value.length > 9){
            vm.$message({
              message: "数量不大于9位数",
              type: "warning"
            });
            return;
          }
          if(!tool.judge("integer", value)){
            vm.$message({
              message: "请输入正整数",
              type: "warning"
            });
            return;
          }
          let paras = {
            goodsId: row.goodsId,
            stockNum: value,
            type: 1
          };
          api.goodUpdate(paras).then(function(data) {
            if (data.resultCode == 2000) {
              vm.initData();
              vm.$message({
                message: "入库成功",
                type: "success"
              });
            } else {
              vm.$message.error(data.message);
            }
          });
        }).catch(() => {

        });

      },
      /**编辑
       * @param {Object} index 下标
       * @param {Object} row 数据
       */
      handleEdit(index, row) {
        vm.$refs.createGood.init(tool.clone(row));
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm("此操作将删除该商品, 是否继续?", "温馨提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true
          })
          .then(() => {
            let paras = {
              goodsId: row.goodsId,
              isDelete: "1",
              type: 3
            };
            api.goodUpdate(paras).then(function(data) {
              if (data.resultCode == 2000) {
                vm.initData();
                vm.$message({
                  message: "删除成功",
                  type: "success"
                });
              } else {
                vm.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      /**
       * 搜索教室
       */
      searchGood() {
        this.tabledisplayObj.currPage = 1;
        this.initData();
      }
    },
    mounted() {
      vm = this;
      let dict = tool.getItem(lsKey.dict, true);
      user = tool.getItem(lsKey.user, true); //得到当前用户信息
      vm.goodsModeMap = tool.parseDict(dict["goods_mode"]);
      vm.initData();
    },
    computed: {}
  };
</script>

<style lang="scss">
  #classroom_manage {
    .el-input__inner {
      border-radius: 0.08rem;
      font-size: 0.16rem;
      color: #666666;
      height: 0.36rem;
      line-height: 0.36rem;
    }

    .el-input__icon {
      line-height: 0.36rem;
    }

    .input_search {
      .el-input__inner {
        background-color: rgb(247, 248, 250);
      }
    }

    .newclassroomNumber {
      .el-input__inner {
        border-radius: 0.04rem;
        height: 0.4rem;
        line-height: 0.4rem;
      }
    }
  }
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
  .right_btn {
    background-image: url(../../assets/img/clue_manage/add_white.png);
    width: 1.54rem;
  }
</style>
